<template>
  <!-- 顶部横条 -->
  <div class="top-bar">
    <div class="top-bar-left">
      <button class="top-btn">新建任务</button>
      <button class="top-btn">任务库</button>
      <select class="class-select">
        <option value="all">全部班级</option>
        <option value="shoes2401">鞋类2401</option>
        <option value="shoes2402">鞋类2402</option>
      </select>
    </div>
    <div class="top-bar-right">
      <input type="text" class="search-input" placeholder="搜索任务..." />
    </div>
  </div>

  <!-- 任务栏区域 -->
  <div class="tasks-container">
    <div v-for="taskBar in taskBars" :key="taskBar.id" class="task-bar">
      <div class="task-info">
        <div class="task-title">{{ taskBar.title }}</div>
        <div class="task-class">{{ taskBar.className }}</div>
      </div>
      <div class="task-buttons">
        <button
          v-for="button in taskBar.buttons"
          :key="button.name"
          class="task-btn"
          @click="handleButtonClick(button.url)"
        >
          {{ button.name }}
        </button>
      </div>
    </div>
  </div>

  <!-- 原有内容 -->
  <!-- <div class="original-content" style="display: flex">
    <transition name="fade">
      <div class="box">
        <div v-for="i in taskList" :key="i" class="firstTitle">
          <div @click="chooseTitle(i.id)">{{ i.firstTitle }}</div>
        </div>
      </div>
    </transition>
    <transition name="fade" v-if="firstTitleChoose">
      <div class="box">
        <div class="firstTitle">
          {{ taskList[firstTitleChoose - 1].firstTitle }}
        </div>
        <div
          v-for="i2 in taskList[firstTitleChoose - 1].subTask"
          :key="i2"
          class="subTask"
        >
          <div @click="chooseSubTask(i2.id)">{{ i2.subTitle }}</div>
          <transition name="fade" mode="out-in">
            <div v-if="subTaskChoose == i2.id">
              <div v-for="i3 in i2.routeUrl" :key="i3" class="subTitle">
                <div
                  @click="router.push(`/${i3.url}`)"
                  style="margin-left: 30px"
                >
                  {{ i3.name }}
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </transition>
  </div> -->
</template>

<script setup>
import router from "@/router";
import { ref } from "vue";

const firstTitleChoose = ref(0);
const subTaskChoose = ref("0");

// 任务栏配置数据
const taskBars = ref([
  {
    id: 1,
    title: "AI在生活中的应用",
    className: "鞋类2402",
    buttons: [
      { name: "AI助教", url: "AiAssistant" },
      { name: "评价结果", url: "evaluate" },
      { name: "增值评价", url: "appreciate" },
      { name: "投票结果", url: "stuResult" },
    ],
  },
  {
    id: 2,
    title: "体验轻纺领域中的人工智能",
    className: "鞋类2402",
    buttons: [
      { name: "AI助教", url: "AiAssistant" },
      { name: "评价结果", url: "evaluate" },
      { name: "增值评价", url: "appreciate" },
      { name: "投票结果", url: "stuResult" },
    ],
  },
  {
    id: 3,
    title: "AI数据分析——流行趋势分析",
    className: "鞋类2402",
    buttons: [
      { name: "AI助教", url: "AiAssistant" },
      { name: "评价结果", url: "evaluate" },
      { name: "增值评价", url: "appreciate" },
      { name: "投票结果", url: "stuResult" },
    ],
  },
  {
    id: 4,
    title: "AI图文创款——鞋履创意设计",
    className: "鞋类2402",
    buttons: [
      { name: "AI助教", url: "AiAssistant" },
      { name: "评价结果", url: "evaluate" },
      { name: "增值评价", url: "appreciate" },
      { name: "投票结果", url: "stuResult" },
    ],
  },
  // {
  //   id: 5,
  //   title: "AI图像识别——鞋履缺陷检测",
  //   className: "鞋类2402",
  //   buttons: [
  //     { name: "AI助教", url: "AiAssistant" },
  //     { name: "评价结果", url: "evaluate" },
  //     { name: "增值评价", url: "appreciate" },
  //     { name: "投票结果", url: "stuResult" },
  //   ],
  // },
  // {
  //   id: 6,
  //   title: "智能体应用——营销推广",
  //   className: "鞋类2402",
  //   buttons: [
  //     { name: "AI助教", url: "AiAssistant" },
  //     { name: "评价结果", url: "evaluate" },
  //     { name: "增值评价", url: "appreciate" },
  //     { name: "投票结果", url: "stuResult" },
  //   ],
  // },
]);

// 处理按钮点击事件
const handleButtonClick = (url) => {
  if (url) {
    router.push(`/${url}`);
  }
};

const taskList = ref([
  {
    id: 1,
    //一级菜单
    firstTitle: "认识生活生产中的人工智能",
    //二级子任务
    subTask: [
      //子任务的标题和router
      {
        id: "1-1",
        subTitle: "AI在生活中的应用",
        routeUrl: [
          {
            id: 1 - 1 - 2,
            name: "应用实战",
            url: "appFinght",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    firstTitle: " 体验轻纺领域中的人工智能",
    subTask: [],
  },
  {
    id: 3,
    firstTitle: "实践鞋履行业中的人工智能",
    subTask: [
      {
        id: "3-1",
        subTitle: "AI数据分析—流行趋势预测",
        routeUrl: [],
      },
      {
        id: "3-2",
        subTitle: "AIGC技术应用—鞋履创意设计",
        routeUrl: [
          {
            name: "AI助教",
            url: "AiAssistant",
          },
          {
            name: "子任务2评价数据展示",
            url: "evaluate",
          },
          {
            name: "子任务增值评价分析",
            url: "appreciate",
          },
          {
            name: "投票结果",
            url: "stuResult",
          },
        ],
      },
      {
        id: "3-3",
        subTitle: " AI图像识别—个性鞋履定制",
        routeUrl: [
          {
            name: "课堂任务",
            url: "foot",
          },
          {
            name: "课堂任务",
            url: "table",
          },
        ],
      },
      {
        id: "3-4",
        subTitle: " 成果展示汇报",
        routeUrl: [
          {
            name: "学情分析",
            url: "learnAnalyze",
          },
          {
            name: "评价数据",
            url: "evaluate2",
          },
          {
            name: "增值评价",
            url: "",
          },
        ],
      },
    ],
  },
]);
firstTitleChoose.value = localStorage.getItem("firstTitleChoose");
subTaskChoose.value = localStorage.getItem("subTaskChoose");

const chooseTitle = (id) => {
  firstTitleChoose.value = id;
  localStorage.setItem("firstTitleChoose", id);
  localStorage.removeItem("subTaskChoose");
};
const chooseSubTask = (id) => {
  subTaskChoose.value = id;
  localStorage.setItem("subTaskChoose", id);
};
</script>

<style lang="scss" scoped>
// 基础样式
.box {
  color: white;
  width: 50%;
}

// 导航样式（如果启用）
.firstTitle {
  width: 90%;
  font-size: 40px;
  font-weight: 700;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 12px;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(74, 158, 255, 0.1);
  user-select: none;
  background: linear-gradient(135deg, rgb(20, 63, 93) 0%, rgb(15, 55, 85) 100%);
  transition: all 0.3s ease;
  position: relative;

  // 顶部科技感线条
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
  }
}

.subTask {
  margin: 10px 5px 0 20px;
  padding: 5px 15px;
  width: 90%;
  font-size: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  user-select: none;
  background: linear-gradient(145deg, rgb(6, 56, 93) 0%, rgb(3, 45, 80) 100%);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  
  &:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, rgb(28, 60, 82) 0%, rgb(20, 50, 70) 100%);
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(74, 158, 255, 0.15);
  }
}

.subTitle {
  margin: 10px 5px 0 20px;
  padding: 7px 15px;
  width: 90%;
  font-size: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
  user-select: none;
  border-radius: 6px;
  &:hover {
    transform: translateY(-1px);
    background-color: rgba(95, 124, 142, 0.8);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.2);
  }
}

// 过渡动画
.fade-enter-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

// 科技感顶部横条样式 - 固定定位
.top-bar {
  position: fixed;
  top: 80px;
  left: 250px;
  right: 0px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 1000;
  background: linear-gradient(135deg, #243f52 0%, #1a2a3a 100%);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(74, 158, 255, 0.1);
  border-bottom: 1px solid rgba(74, 158, 255, 0.2);
}

.top-bar-left {
  display: flex;
  gap: 20px;
}

// 科技感按钮样式
.top-btn {
  padding: 8px 25px;
  font-size: 18px;
  font-weight: 500;
  color: white;
  background: linear-gradient(145deg, rgb(30, 80, 120) 0%, rgb(20, 70, 110) 100%);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(74, 158, 255, 0.1);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
}

.top-btn:hover {
  background: linear-gradient(145deg, rgb(50, 120, 160) 0%, rgb(40, 110, 150) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(74, 158, 255, 0.2);
}

// 科技感班级选择下拉框
.class-select {
  padding: 8px 25px;
  font-size: 18px;
  font-weight: 500;
  color: white;
  background: linear-gradient(145deg, rgb(30, 80, 120) 0%, rgb(20, 70, 110) 100%);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(74, 158, 255, 0.1);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
  // 移除默认下拉框样式
  appearance: none;
  // 添加自定义下拉箭头
  position: relative;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.7)"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
  padding-right: 50px;
}

.class-select:hover {
  background: linear-gradient(145deg, rgb(50, 120, 160) 0%, rgb(40, 110, 150) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(74, 158, 255, 0.2);
}

.class-select:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(74, 158, 255, 0.3);
}

// 自定义下拉选项样式
.class-select option {
  background: #1a2a3a;
  color: white;
  padding: 10px;
  font-size: 16px;
}

.class-select option:hover {
  background: #243f52;
}

.top-bar-right {
  display: flex;
  align-items: center;
}

// 科技感搜索框
.search-input {
  width: 350px;
  height: 40px;
  padding: 0 20px;
  font-size: 18px;
  background: linear-gradient(145deg, rgb(20, 60, 90) 0%, rgb(10, 50, 80) 100%);
  color: white;
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 20px;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
  border-color: #4a9eff;
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(74, 158, 255, 0.3);
}

// 科技感任务栏容器
.tasks-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  padding-top: 90px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(15, 50, 80, 0.1) 0%, rgba(10, 40, 70, 0.1) 100%);
  backdrop-filter: blur(10px);
}

// 科技感任务卡片
.task-bar {
  height: 120px;
  background: linear-gradient(145deg, rgb(15, 50, 80) 0%, rgb(10, 40, 70) 100%);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 12px;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(74, 158, 255, 0.1);
  position: relative;
  overflow: hidden;

  // 顶部科技感线条
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
  }

  // 悬浮效果
  &:hover {
    background: linear-gradient(145deg, rgb(25, 70, 100) 0%, rgb(20, 60, 90) 100%);
    border-color: #4a9eff;
    transform: translateY(-5px);
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(74, 158, 255, 0.2);
  }

  // 科技感底部发光效果
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 158, 255, 0.5), transparent);
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  &:hover::after {
    opacity: 1;
  }
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.task-buttons {
  display: flex;
  gap: 15px;
}

// 科技感任务按钮
.task-btn {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  background: linear-gradient(145deg, rgb(30, 80, 120) 0%, rgb(20, 70, 110) 100%);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.task-btn:hover {
  background: linear-gradient(145deg, rgb(50, 120, 160) 0%, rgb(40, 110, 150) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(74, 158, 255, 0.2);
}

// 任务标题样式
.task-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(74, 158, 255, 0.2);
  letter-spacing: 1px;
}

.task-class {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(74, 158, 255, 0.1);
}

/* 原有内容容器 - 调整上边距 */
.original-content {
  margin-top: 20px;
  padding-bottom: 40px;
}
</style>